Posted by PK | Jan 16, 2018 | CSS, Divi, Tips & Tricks, Tutorials | 27  |     

This one is a really useful tip that I think you’re gonna like.

Aligning buttons. Woot!

Note: This can apply to lots and lots of other cases, I might make more tutorials on flexbox, because I love it so much, but that’ll come later. After I finish this one.

Edit
If you want to learn flexbox and how to build using Divi with awesome responsiveness in mind, check out this course I made.

So, here’s where we start.

Let’s add three buttons. All in one column.

It looks pretty great at this moment.

Just like a test site should.

Now, to flex these bad boys.

First, let’s add a class to the section so we can use this in other places later.

Now to code the alignments.

Note: The final code will be at the end of this post, so you don’t have to copy paste every line separately. Just read along for now.

First, the way flexbox works is by changing the display type. But we need to make it filter down through the row and into the column where it’s needed.

This gives us:

As you can see, the previous stacked layout is now on one line.

What flexbox does is it scrunches up all the elements inside its display area, and puts them all next to each other.
So we’ll need to align them. Let’s align them to the center both vertically and horizontally.

justify-content is used for horizontal alignment, and align-items is for vertical.

This gives us:

Yay! Progress!
So what we need to do now is to give the buttons some space between them.

There are a couple of ways of doing this..
1. Give the middle button margins to the left and right.
2. Give all the buttons half margins to the left and right.

It’s up to you on how to add the margins as well. You can do it through the Divi builder settings, separate css in the button’s custom css settings, add an nth item selector to the column, or just do it in what I think is the easiest way: just target all the buttons and give them some margins. Like this:

The reason why I wrote the css as above is because
a. it’ll target the modules inside the sections you assigned with .flexing-away, and not any other modules
b. it’ll also target other modules if in such section, which you might need, and
c. I use rem units, but you can change it to ems, or px, it’s up to you. I personally like rem.

So here we have it!

Pretty nifty, eh?

But what about MOBILE????

Ah, yes. We can’t leave out mobile.

So we need to do two things:
1. make the buttons stack
2. make them 100% width with the text inside centered.

here’s the css for that

Of course, you can try resizing the browser, and see what you like and change the max-width pixel width to assign when the buttons are gonna stack.

and there you have it.

Note: all the css should be added in Divi > theme options > custom css for this new super power to be applied across the whole website.

Here’s the final code snippet. I added comments for you to easily modify.

NOTICE

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

The ability to vertically align content when building a site with Divi can be a convenient addition to your design tool belt. Sometimes a certain layout calls for content to be vertically aligned in different ways (centered, bottom, top). The most common need is to have your content vertically centered. It provides a delightful touch of symmetrical spacing that really comes in handy when using multiple column layouts for your content. Plus, vertically centered content stays centered on different browser widths, which takes the grunt work out of applying custom padding or margins to get similar responsiveness.

In this tutorial, I’m going to show you how you can add a few small snippets of CSS to any column to vertically align the content. I’ll be using some of Divi’s premade layouts for examples of how to do this. If you don’t know much about CSS, you don’t have to worry. This will be easy enough to apply to your own layouts in seconds.

Understanding Flex and Divi

The Flex (or Flexbox) css property is simply a way for positioning elements in horizontal and/or vertical stacks (kind of like a table). Except, unlike traditional tables, the flex property allows you to create boxes that adjust or “flex” to the size of the content it holds.

Divi does use the flex property whenever you select “Equalize Column Heights” as your row setting. This simply makes sure the size of your columns will all adjust to the size of the column with the most content. And since “Equalize Column Heights” activates the flex for the row container, you can easily take advantage of that by adding css to your columns to adjust the contents of each column (or box).

For example, if you add “margin: auto” to any column in a row, the content of that column (whether it be one or more modules) will become vertically centered.

Also, if you add “align-items:center;” to your row, all of your columns (and their content) will be vertically centered.

Of course, there are many more uses for the flex property in web design along with more advanced CSS that you can apply to your theme. But for this tutorial, I wanted to keep things simple.

Is This Really Necessary?

Technically, no. You can vertically align your content/modules within a column using custom spacing (padding and margin). For example, you can use Divi’s spacing options to give a column equal top and bottom padding to center the module(s) vertically within the column. Or, you can add only top padding to a column to make the content bottom aligned. However, you may have to adjust the spacing when updating your page with more content. Plus, it may be difficult to keep this alignment on different browser widths.

So, if you are looking for a solution to vertically aligning content without having to think about custom spacing, I think you will find this useful.

Let’s get started!

Load the Premade Layout to Your Page

To kick things off, I’m going to use the Interior Design Company Portfolio Page Layout. To get this layout on your page, create a new page. Then give your page a title. Click “Use Divi Builder” and then “Use Visual Builder”. Then select the option “Choose a Premade Layout”. Then select the Interior Design Company Layout Pack from the Load From Library popup. Finally, select the Portfolio page from the list of layouts and click “Use this Layout”.

Once the layout has loaded to your page, you are ready to go.

Method 1: How to Vertically Align Content using Flex and Auto Margin

Open the row settings of the second row on the page (the one directly under the row with the page title). Under the design settings toggle open the Sizing option group and notice that “Equalize Column Heights” is already active. This means that the row now has the flex property (“display: flex;”) added to it.

Now go to the Advanced tab settings for the same row and add the following css snippet under the Column 2 Main Element input box.

Now the second column content has shifted to become vertically centered.

Making the Content Bottom Aligned

If you want to make your content bottom aligned so that all modules will stack on the bottom of your column, you can adjust the margin value as follows:

Aligning Content Vertically for All Columns in Your Row

Instead of adding “margin:auto” to each column individually, You can also vertically center the content of all columns in your row by adding the following snippet to the main element of your Row settings.

Or if you want all the content of your columns to be bottom aligned, you can add this snippet:

And, don’t forget that you could take advantage of Divi’s Extend Styles feature by right clicking on the main element with your css snippet and clicking “Extend Main Element”.

Then extend that main element css to all rows throughout the page (or section) to vertically center all the content of every column on the page.

Now everything is vertically centered.

But, you may have noticed the white column background color no longer spans the full height of the row. This is because we added “margin: auto” to the column. To fix this, you could change the row background color to white and get rid of the row padding. But instead, I’m going to show you a way for you to center the content of your column without changing the margin.

Method 2: Vertically Aligning Content using Column Flex Direction

In the first method, we took advantage of the flex property being added to the row. This made each of our columns a “flex box” that can be vertically aligned simply by adjusting the margin.

But there is also a way for use to flex-direction to align the content of our column without losing the “Equalize Column Height” effect that keeps our columns (and column backgrounds) the same size. To do this we are simple going to add a few lines of CSS to our column so that all the modules within the column will be stacked vertically and then centered.

Let’s go back to our row in the previous example. Open up the Row Settings and take out any custom css you may have in there by right clicking on Custom CSS and clicking “Reset Custom CSS Styles”

Then add the following CSS under Column 2 Main Element:

Or if I wanted to bottom align the content, simply change “justify-content: center” to “justify-content: flex-end”.

What is great about this setup is that if I have my content vertically centered and I make the row full width, the content stays centered.

Making Blurbs with Various Amounts of Text Vertically Aligned

Making your column content vertically centered can also come in handy for blurbs. As you know, not every blurb will have the exact amount of text used to describe the feature or service. Making these blurbs vertically centered can create a nice design for your layout.

For this example, I’m going to vertically align the blurbs on the Digital Payments Home Page Layout.

I’m going to first add some differing amounts of body text to the blurbs to give a more realistic representation of what a site might look like.

Now, I need to go to the row settings and “Equalize Column Heights”.

Now I can add my CSS snippets to align my content and change the design.

Under the Advanced tab of your Row Settings, we can vertically center the content of our columns by adding the following under Main Element:

Or change it to the following to make them bottom aligned.

Or you can reset your custom css styles and add the following custom margins to make the first column bottom aligned and the third column top aligned.

Column 1 Main Element CSS:

Column 3 Main Element CSS:

What About One Column Layouts?

Technically, you don’t need a css snippet or flex to get your one column content vertically centered. All you need to do is make sure you have equal spacing above and below your content (or modules). Most of the time, people need vertical centered content on layouts with multiple columns because they want the adjacent content to line up perfectly.

Lots of Applications

There are a lot of useful applications vertically aligning your content in Divi. This would come in handy for headers with a two column layout with the heading text in one column and you want to make sure a CTA (button) in the other column is vertically centered. It would also be helpful for vertically centering logos in a six column layout (especially if the logos have slightly different dimensions).

Final Thoughts

Even though this method does rely on a few small snippets of custom CSS, I believe the application can be extremely useful for those looking for a quick fix to a sometimes cumbersome process. I would love to hear of other examples where this might come in handy.

Feel free to share your ideas and comments below.

Cheers!

get_bloginfo( string $show = '', string $filter = 'raw' )

Retrieves information about the current site.

CONTENTS

• Description
  • Parameters
  • Return
  • Source
  • Changelog
• More Information
  • Usage
• Related
  • Uses
  • Used By
• User Contributed Notes

Description #Description

Possible values for $show include:

• ‘name’ – Site title (set in Settings > General)
• ‘description’ – Site tagline (set in Settings > General)
• ‘wpurl’ – The WordPress address (URL) (set in Settings > General)
• ‘url’ – The Site address (URL) (set in Settings > General)
• ‘admin_email’ – Admin email (set in Settings > General)
• ‘charset’ – The "Encoding for pages and feeds" (set in Settings > Reading)
• ‘version’ – The current WordPress version
• ‘html_type’ – The content-type (default: "text/html"). Themes and plugins can override the default value using the ‘pre_option_html_type’ filter
• ‘text_direction’ – The text direction determined by the site’s language. is_rtl() should be used instead
• ‘language’ – Language code for the current site
• ‘stylesheet_url’ – URL to the stylesheet for the active theme. An active child theme will take precedence over this value
• ‘stylesheet_directory’ – Directory path for the active theme. An active child theme will take precedence over this value
• ‘template_url’ / ‘template_directory’ – URL of the active theme’s directory. An active child theme will NOT take precedence over this value
• ‘pingback_url’ – The pingback XML-RPC file URL (xmlrpc.php)
• ‘atom_url’ – The Atom feed URL (/feed/atom)
• ‘rdf_url’ – The RDF/RSS 1.0 feed URL (/feed/rdf)
• ‘rss_url’ – The RSS 0.92 feed URL (/feed/rss)
• ‘rss2_url’ – The RSS 2.0 feed URL (/feed)
• ‘comments_atom_url’ – The comments Atom feed URL (/comments/feed)
• ‘comments_rss2_url’ – The comments RSS 2.0 feed URL (/comments/feed)

Some $show values are deprecated and will be removed in future versions. These options will trigger the _deprecated_argument() function.

Deprecated arguments include:

• ‘siteurl’ – Use ‘url’ instead
• ‘home’ – Use ‘url’ instead

Parameters #Parameters

$show

(string) (Optional) Site info to retrieve. Default empty (site name).

Default value: ''

$filter

(string) (Optional) How to filter what is retrieved.

Default value: 'raw'

Top ↑

Return #Return

(string) Mostly string values, might be empty.

Top ↑

Source #Source

File: wp-includes/general-template.php

Expand full source code View on Trac

Top ↑

Changelog #Changelog

ChangelogVersionDescription

Top ↑

More Information #More Information

Top ↑

Usage #Usage

Top ↑

Related #Related

Top ↑

Uses #Uses

UsesUsesDescription

Show 9 more uses

Top ↑

Used By #Used By

Used ByUsed ByDescription

Show 63 more used by

Top ↑

User Contributed Notes #User Contributed Notes

1. Skip to note 1 content

   You must log in to vote on the helpfulness of this noteVote results for this note:1You must log in to vote on the helpfulness of this note

   

   Contributed by Codex — 4 years ago

   Default Usage
   The default usage assigns your blog’s title to the variable $blog_title.

   1	<?php $blog_title = get_bloginfo(); ?>

   Log in to add feedback

2. Skip to note 2 content

   You must log in to vote on the helpfulness of this noteVote results for this note:1You must log in to vote on the helpfulness of this note

   

   Contributed by Codex — 4 years ago

   Blog Title
   This example assign your blog’s title to the variable $blog_title. This returns the same result as the default usage.

   1	<?php $blog_title = get_bloginfo( 'name' ); ?>

   Log in to add feedback

3. Skip to note 3 content

   You must log in to vote on the helpfulness of this noteVote results for this note:1You must log in to vote on the helpfulness of this note

   

   Contributed by Codex — 4 years ago

   Blog Tagline
   Using this example:

   1	<?php printf( esc_html__( 'Your Blog Tagline is: %s', 'textdomain' ), get_bloginfo ( 'description' ) ); ?><br />

   Results in this being displayed on your blog:

   Your Blog Tagline is: All things WordPress

   Log in to add feedback

4. Skip to note 4 content

   You must log in to vote on the helpfulness of this noteVote results for this note:1You must log in to vote on the helpfulness of this note

   

   Contributed by Codex — 4 years ago

   Network Tagline
   Using this example, you can obtain the name and description for the network home:

   1 2 3 4 5 6 7 8 9 10

   <?php switch_to_blog(1); $site_title = get_bloginfo( 'name' ); $site_url = network_site_url( '/' ); $site_description = get_bloginfo( 'description' ); restore_current_blog(); echo 'The Network Home URL is: ' . $site_url; echo 'The Network Home Name is: ' . $site_title; echo 'The Network Home Tagline is: ' . $site_description;  ?>

   results in this being displayed on your blog:

   The Network Home URL is: http://example.com/
   The Network Home Name is: Example
   The Network Home Tagline is: The example site

   Log in to add feedback

5. Skip to note 5 content

   You must log in to vote on the helpfulness of this noteVote results for this note:0You must log in to vote on the helpfulness of this note

   

   Contributed by mslade — 2 years ago

   The comments regarding `get_bloginfo(‘url’)` are misleading. It will *not* necessarily return what is set in Settings > General. The protocol (“http” or “https”) will be determined by the value of `is_ssl()`, which detects if the current request is over SSL or not.

   Log in to add feedback

6. Skip to note 6 content

   You must log in to vote on the helpfulness of this noteVote results for this note:0You must log in to vote on the helpfulness of this note

   

   Contributed by Rehmat — 1 year ago

   There should be a possibility to return the array of all available info. Although this might not be a good practice in terms of performance this should help someone who needs to fetch all info about a website. Note that I’ve omitted some fields that might not be that important:

   1 2 3 4 5 6 7 8

   function bloginfo_array() {     $fields = array('name', 'description', 'wpurl', 'url', 'admin_email', 'charset', 'version', 'html_type', 'text_direction', 'language');     $data = array();     foreach($fields as $field) {         $data[$field] = get_bloginfo($field);     }     return $data; }

VIEW A LIVE DEMO OF THIS MODULE

How To Add A Button Module To Your Page

Before you can add a button module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don’t forget to add a row to your page first. We have some great tutorials about how to use Divi’s row and section elements.

Locate the button module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word “button” and then click enter to automatically find and add the button module! Once the module has been added, you will be greeted with the module’s list of options. These options are separated into three main groups: Content, Design and Advanced.

Use Case Example: Adding a CTA Button to the Hero Section of a Landing Page.

There are countless ways to use the Button Module. For this example, I’m going to show you how to add a “learn more” button to the hero section of a landing page.

Let’s get started.

Use the visual builder to add a Standard Section with a fullwidth (1 column) layout. Add a Text Module to add and style the Headline and Subheadline. Then add the Button Module directly under the Text Module.

Update the Module Settings as follows:

Content tab

Button Text: Learn More
Button URL: [enter URL]

Design tab
Button alignment: Center
Text Color: Light
Use Custom Styles for Button: YES
Button Text Size: 20px
Button Text Color: #ffffff
Button Background Color: #0065cb
Button Border Width: 9px
Button Border Color: #0065cb
Button Border Radius: 100px
Button Letter Spacing: 2px
Button Font: Source Sans, Bold, Uppercase
Button Hover Letter Spacing: 2px

That’s it! This is just one of the countless ways you can use the button module.

Button Content Options

Within the content tab you will find all of the module’s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

Button Text

Input your desired button text.

Button URL

Input the destination URL for your button.

URL Opens

Here you can choose whether or not your link opens in a new window.

Admin Label

This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.

Button Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Button Alignment

Here you can choose to have your button aligned to the left, right or center.

Text Color

Here you can choose whether your text should be light or dark. If you are working with a dark background, then your text should be light. If your background is light, then your text should be set to dark.

Use Custom Styles for Button

Enabling this option will reveal various button customization settings that you can use to change the appearance of your module’s button.

Button Text Size

This setting can be used to increase or decrease the size of the text within the button. The button will scale as the text size is increased and decreased.

Button Text Color

By default, buttons assume your theme accent color as defined in the Theme Customizer. This option allows you to assign a custom text color to the button in this module. Select your custom color using the color picker to change the button’s color.

Button Background Color

By default, buttons have a transparent background color. This can be changed by selected your desired background color from the color picker.

Button Border Width

All Divi buttons have a 2px border by default. This border can be increased or decreased in size using this setting. Borders can be removed by inputting a value of 0.

Button Border Color

By default, button borders assume your theme accent color as defined in the Theme Customizer. This option allows you to assign a custom border color to the button in this module. Select your custom color using the color picker to change the button’s border color.

Button Border Radius

Border radius affects how rounded the corners of your buttons are. By default, buttons in Divi has a small border radius that rounds the corners by 3 pixels. You can decrease this to 0 to create a square button or increase it significantly to create buttons with circular edges.

Button Letter Spacing

Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your button text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Button Font

You can change the font of your button text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.

Add Button Icon

Disabled this setting will remove icons from your button. By default, all Divi buttons display an arrow icon on hover.

Button Icon

If icons are enabled, you can use this setting to pick which icon to use in your button. Divi has various icons to choose from.

Button Icon Color

Adjusting this setting will change the color of the icon that appears in your button. By default, the icon color is the same as your buttons’ text color, but this setting allows you to adjust the color independently.

Button Icon Placement

You can choose to have your button icon display on the left or the right side of your button.

Only Show Icon On Hover for Button

By default, button icons are only displayed on hover. If you would like the icon to always appear, disable this setting.

Button Hover Text Color

When the button is hovered over by a visitor’s mouse, this color will be used. The color will transition from the base color defined in the previous settings.

Button Hover Background Color

When the button is hovered over by a visitor’s mouse, this color will be used. The color will transition from the base color defined in the previous settings.

Button Hover Border Color

When the button is hovered over by a visitor’s mouse, this color will be used. The color will transition from the base color defined in the previous settings.

Button Hover Border Radius

When the button is hovered over by a visitor’s mouse, this value will be used. The value will transition from the base value defined in the previous settings.

Button Hover Letter Spacing

When the button is hovered over by a visitor’s mouse, this value will be used. The value will transition from the base value defined in the previous settings.

Button Advanced Options

Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module’s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme’s style.css file.

CSS ID

Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.

CSS Class

Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space. These classes can be used in your Divi Child Theme or within the Custom CSS that you add to your page or your website using the Divi Theme Options or Divi Builder Page Settings.

Custom CSS

Custom CSS can also be applied to the module and any of the module’s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.

Button Relationship

Here you can define a custom rel attribute for the button, such as rel=”nofollow.” Divi lets you pick from all of the most common link attributes.

Visibility

This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smart phones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.