WPBakery Layout Anleitung

### Step 1: Create a New Section
1. Open the WPBakery Page Builder.
2. Add a new section to your page.

### Step 2: Add a Row
1. Inside the section, add a single-column row.

### Step 3: Add a Heading
1. Add a **Text Block** or **Custom Heading** element.
2. Enter the heading text: *"Ihre Gesamtlösung für Batterie- & Anschlusstechnik"*.
– **Font Size:** Adjust font size to a large size, such as 32px or more, to mimic the visual style.
– **Font Color:** Use a dark blue color (#003366) or similar.
– **Alignment:** Center the text.

### Step 4: Add Paragraph Text
1. Below the heading, add another **Text Block** element.
2. Paste the paragraph text:
*"Von der kühlenden Rippenplatte bis zur Vollisolierung Ihrer elektrischen Terminals … in einem persönlichen Gespräch."*
– **Font Size:** Set to around 16px.
– **Color:** Use a dark gray color (#333333).
– **Alignment:** Center the text.

### Step 5: Add a Button
1. Add a **Button** element below the paragraph text.
2. Set the button text to **"Jetzt Kontakt aufnehmen"**.
3. Style the button:
– **Background Color:** Dark blue (#003366).
– **Text Color:** White.
– **Border Radius:** Slightly rounded, e.g., 5px.
– **Hover Effect:** Add a lighter shade of blue on hover.

### Step 6: Add Background and Border
1. Edit the **Section** settings:
– **Background:** Add a very light gray or white background.
– **Padding:** Add 40px padding on all sides.
– **Border:** Use a thin dashed border in blue (#003366).

2. Add a background **image of the lion watermark**:
– Upload the lion watermark image (like in your screenshot).
– Set the background image style to "Center" and "No Repeat."
– Adjust opacity to make it subtle, ensuring it doesn’t overpower the text.

### Step 7: Save and Preview
1. Save the changes.
2. Preview the page to ensure the design matches your reference.

If you need help fine-tuning specific parts, let me know!

### Step 1: Select the Text Layer
1. Open your Figma design file.
2. Select the text layer or the text box that contains the font you want to export.

### Step 2: Check Font Information
1. In the right sidebar, look for the **Text** section to see the font family, size, weight, and other properties.
2. Make a note of the font family name and styles used (e.g., regular, bold, italic).

### Step 3: Download the Font
1. **Check Font License**: Before downloading any font, ensure you have the right to use it in your projects. Fonts may be licensed or free to use.
2. **Google Fonts**: If the font is from Google Fonts, you can easily download it from [Google Fonts](https://fonts.google.com) by searching for the font name.
3. **Font Foundries**: If the font is a commercial typeface, visit the foundry’s website to purchase and download it.

### Step 4: Install the Font
1. After downloading the font file (typically in `.ttf` or `.otf` format), install it on your computer:
– **Windows**: Right-click the font file and select "Install."
– **Mac**: Double-click the font file and click "Install Font."

### Step 5: Use the Font in Your Project
1. After installation, the font will be available in design tools (like Adobe XD, Sketch, etc.) and development environments (like your website or application).

### Exporting Font Styles
If you need to export font styles or CSS for use in a web project, you can manually write the CSS based on the font properties noted earlier:

/* Example CSS */
body {
    font-family: 'Your Font Name', sans-serif; /* or serif */
    font-size: 16px; /* Adjust based on your design */
    font-weight: 400; /* Regular */
}

/* Example for bold */
h1, h2, h3 {
    font-weight: 700; /* Bold */
}

### Using Figma Plugins
Figma also has plugins that can help with exporting assets and styles, including fonts. Consider using plugins like **"Figma to CSS"** or **"Font Prep"** to automate some of these processes.

If you have any specific font or project in mind, let me know!

### Step 1: Download the Railway Font
The Railway font can be obtained from Google Fonts:

1. **Visit Google Fonts**: Go to [Google Fonts – Railway](https://fonts.google.com/specimen/Railway).
2. **Select the Styles**: Click on the “+” icon next to the font weights you want to use (e.g., Regular, Bold, etc.).
3. **Download the Font**:
– After selecting the styles, click on the "View your selected families" bar at the bottom of the page.
– Click the "Download" button (downward arrow icon) to get a zip file containing the font files.

### Step 2: Install the Font
1. **Extract the ZIP File**: After downloading, extract the contents of the zip file.
2. **Install the Font**:
– **Windows**: Right-click on the `.ttf` or `.otf` files and select "Install."
– **Mac**: Double-click the font file and click "Install Font."

### Step 3: Use Railway in Your Project
You can use the Railway font in your web project by including it from Google Fonts directly or using it locally.

#### Option 1: Using Google Fonts Link
Add the following “ tag in the “ section of your HTML:

<link href="https://fonts.googleapis.com/css2?family=Railway:wght@400;700&display=swap" rel="stylesheet">

Then, in your CSS, apply it like this:

body {
    font-family: 'Railway', sans-serif; /* Use a fallback like sans-serif */
}

#### Option 2: Using Local Font Files
If you've installed the font locally or want to include it in your project files, use `@font-face` in your CSS:

1. Make sure to place the font files in your project (e.g., in a `fonts` directory).
2. Add the following to your CSS file:

@font-face {
    font-family: 'Railway';
    src: url('fonts/Railway-Regular.ttf') format('truetype'), /* Adjust the path */
         url('fonts/Railway-Bold.ttf') format('truetype'); /* Include all weights you want */
    font-weight: normal;
    font-style: normal;
}

/* Now you can use the font in your styles */
body {
    font-family: 'Railway', sans-serif;
}

### Step 4: Verify and Test
After applying the font, verify it in your web project. Open the page in a browser and check if the Railway font is displayed correctly.

If you have any questions or need further assistance with using the Railway font, feel free to ask!

### Step 1: Use Google Fonts in WPBakery

1. **Install a Google Fonts Plugin** (optional):
– You can use a plugin like **Easy Google Fonts** or **WP Google Fonts** to easily integrate Google Fonts into your WordPress site.
– Install and activate the chosen plugin from the WordPress plugin repository.

2. **Add Railway Font via Google Fonts**:
– If you're using **Easy Google Fonts**, follow these steps:
– Go to **Appearance > Customize**.
– Click on **Typography** (this section will appear after installing the plugin).
– Choose a section (like **Body Typography** or **Headings**).
– In the **Font Family** dropdown, search for and select **Railway**.
– Customize the font size, weight, and other properties as needed.

### Step 2: Manually Add Railway Font

If you prefer to add the font manually without a plugin, follow these steps:

1. **Add Google Fonts Link**:
– Go to **Appearance > Theme Editor** in your WordPress dashboard.
– Open the **header.php** file or use a custom function to enqueue scripts in your theme's **functions.php** file.
– Add the following link in the “ section of your header file or enqueue it in functions.php:

function custom_google_fonts() {
       wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap', false);
   }
   add_action('wp_enqueue_scripts', 'custom_google_fonts');

2. **Add Custom CSS**:
– Navigate to **Appearance > Customize > Additional CSS**.
– Add the following CSS to set the Railway font for different elements:

body {
       font-family: 'Raleway', sans-serif;
   }
   h1, h2, h3, h4, h5, h6 {
       font-family: 'Raleway', sans-serif; /* Optional: change headings to Railway */
   }

### Step 3: Use Railway Font in WPBakery

Now that you have added the Railway font, you can use it in WPBakery Page Builder:

1. **Edit Page with WPBakery**:
– Go to the page you want to edit and click on **Edit with WPBakery Page Builder**.

2. **Edit Text Blocks**:
– Add a **Text Block** or **Custom Heading** element.
– In the element settings, under **Font**, you should see **Raleway** available if added correctly.
– Choose **Railway** from the font options.

3. **Save Changes**:
– After making your edits, click on **Save Changes** in the WPBakery element settings and then **Update** the page.

### Step 4: Verify on Frontend

– Open your page in the browser and check if the Railway font is applied correctly.

If you encounter any issues or need further customization, let me know!

### Step 1: Download the Railway Font

1. **Download the Font Files**:
– Visit the [Google Fonts page for Railway](https://fonts.google.com/specimen/Raleway).
– Click on the **"Download family"** button to download the font files as a ZIP archive.
– Extract the ZIP file on your computer to access the font files, typically in `.ttf` or `.otf` formats.

### Step 2: Upload Font Files to Your WordPress Site

1. **Upload the Font Files**:
– Use an FTP client (like FileZilla) or the built-in file manager in your hosting control panel.
– Navigate to your WordPress theme directory, usually located at `wp-content/themes/your-theme/`.
– Create a new folder named `fonts` (or any name you prefer) and upload the Railway font files into this folder.

### Step 3: Add @font-face CSS to Your Theme

1. **Edit Your Theme's Style.css File**:
– Go to **Appearance > Theme Editor** in your WordPress dashboard.
– Find the **style.css** file of your active theme.
– Add the following `@font-face` CSS at the top or bottom of the style.css file, adjusting the paths to the font files accordingly:

@font-face {
       font-family: 'Raleway';
       src: url('fonts/Raleway-Regular.ttf') format('truetype'), /* Adjust the filename and path */
            url('fonts/Raleway-Bold.ttf') format('truetype'); /* Include all weights you uploaded */
       font-weight: normal; /* Regular weight */
       font-style: normal;
   }

   @font-face {
       font-family: 'Raleway';
       src: url('fonts/Raleway-Bold.ttf') format('truetype'); /* Path to the bold font */
       font-weight: bold; /* Bold weight */
       font-style: normal;
   }

### Step 4: Use the Railway Font in WPBakery

1. **Edit Page with WPBakery**:
– Navigate to the page you want to edit and click on **Edit with WPBakery Page Builder**.

2. **Add Text Elements**:
– Add a **Text Block** or **Custom Heading** element.
– In the element settings, you won’t see the Railway font directly in WPBakery’s dropdown, so you'll need to use custom CSS.

### Step 5: Add Custom CSS for WPBakery Elements

1. **Add Custom CSS**:
– Go to **Appearance > Customize > Additional CSS**.
– Add the following CSS to apply the Railway font to specific elements:

body {
       font-family: 'Raleway', sans-serif;
   }
   h1, h2, h3, h4, h5, h6 {
       font-family: 'Raleway', sans-serif; /* Use Railway for headings */
   }

### Step 6: Save and Verify

1. **Save Your Changes**:
– Save the changes made in the theme editor and the Additional CSS section.

2. **Verify the Font**:
– Open your website in a browser and check if the Railway font is applied correctly.

### Optional: Custom Font Settings in WPBakery

If you want to customize specific elements in WPBakery using the custom CSS class:

1. **Edit Text Elements**:
– Add a **Custom CSS Class** to your WPBakery elements (e.g., in the element settings, look for an option called **"Extra class name"**).
– Use a class like `raleway-font` and then add the following CSS to your Additional CSS:

.raleway-font {
       font-family: 'Raleway', sans-serif;
   }

Now your selected elements will use the Railway font.

If you need any more assistance, feel free to ask!